<!-- $Id: listWidget.html 100 2011-04-22 09:53:26Z nicholasinlove1986@gmail.com $ -->
<include file="Public:pageheader"/>
<load href="__PUBLIC__/Js/validator.js" />
<load href="__PUBLIC__/Js/ui/jquery.ui.core.js" />
<load href="__PUBLIC__/Js/ui/jquery.ui.widget.js" />
<load href="__PUBLIC__/Js/ui/jquery.ui.mouse.js" />
<load href="__PUBLIC__/Js/ui/jquery.ui.sortable.js" />
<style type="text/css">
#offWidget, #onWidget, #customWidget {
	list-style-type: none; 
	margin: 0; padding: 0; 
	margin:10px; 
	padding:10px;
	width: 50%; 
	border:1px solid #7F9DB9;
}
#offWidget li, #onWidget li, #customWidget li{ 
	margin: 5px; 
	padding: 5px; 
	width: 95%; 
	text-align:left;
}
.widget-title { 
	float:left; 
	font-size:14px;
}
.widget-action { 
	float:right;
}
.widget-description { 
	padding: 5px 5px 4px;
	line-height: 16px; 
	font-size:12px; 
	color:#808080; 
	clear:both; 
	display:none;
}
.widget-delete { 
	clear:both; 
	float:right;
}
.click{text-decoration:none;}
.ui-state-default {
	background:#F6F6F6 repeat-x scroll 50% 50%;
	border:1px solid #CCCCCC;
	color:#333333;
	font-weight:bold;
	outline-color:-moz-use-text-color;
	outline-style:none;
	outline-width:medium;
}
.ui-state-default2 {
	background:#F6F6F6 repeat-x scroll 50% 50%;
	border:1px solid #FFCC00;
	color:#333333;
	font-weight:bold;
	outline-color:-moz-use-text-color;
	outline-style:none;
	outline-width:medium;
}
.ui-state-highlight {
	background:#F4FaFb repeat-x scroll 50% 50%;
	border:1px dashed #278296;
	color:#363636;
	font-weight:bold;
	outline-color:-moz-use-text-color;
	outline-style:none;
	outline-width:medium;
}
</style>
<script type="text/javascript">
$(function() {

	/*$( "#offWidget, #onWidget" ).sortable({
	    delay:1,
		connectWith: ".connectedSortable",
		stop:function(){
			alert($( "#onWidget" ).sortable('serialize'));
		}
	}).disableSelection();*/
	
	$( "#offWidget, #onWidget, #customWidget" ).sortable({
	    delay:1,
		connectWith: ".connectedSortable",
		placeholder: "ui-state-highlight",
		stop:function(){
/*			alert($( "#onWidget" ).sortable('serialize'));*/
			ThinkAjax.send('__URL__/saveWidget',"ajax=1&"+$("#onWidget").sortable('serialize'),'','result');
		}
	}).disableSelection();
	
	$('a.move').bind('click', toggleContent);
	
});

var toggleContent = function(e) {
	var targetContent = $('div.widget-description', this.parentNode.parentNode);
	if (targetContent.css('display') == 'none') {
		targetContent.slideDown(200);
		$(this).html('[-]');
	} else {
		targetContent.fadeOut(400);
		$(this).html('[+]');
	}
	return false;
};

/**
* 检查表单输入的数据
*/
function validate()
{
	validator = new Validator("theForm");	
	validator.required("custom_widget_title","请输入自定义Widget标题");
	validator.required("custom_widget_content","请输入自定义Widget内容");
	return validator.passed();
}
</script>
<ul style="padding:0; margin: 0; list-style-type:none; color: #CC0000;">
  <li style="border: 1px solid #CC0000; background: #FFFFCC; padding: 10px; margin-bottom: 5px;" >
  拖拽小工具到侧栏以激活它们，将它们拖回来则自动禁用它们。各个小工具具体参数设置，请移步到系统设置->侧栏设置。
  <div id="result"></div>
</li>
</ul>
<form  name="theForm" method="post"  action="__URL__/customWidget"  onsubmit="return validate()">
<div class="list-div">
<table cellpadding="3" cellspacing="1">
<th>可用小工具</th>
<th>侧栏sidebar</th>
  <tr>
  <td align="center" valign="top" width="50%">
<a>默认Widget</a>
<ul id="offWidget" class="connectedSortable">
<volist name="widget_off" id="off">
	<li id="offWidget_{$key}" class="ui-state-default">
	 <div class="widget-title">{$off.title}</div>
	 <div class="widget-action"><a href="#" class="move">[+]</a></div>
	 <div class="widget-description">{$off.description}</div>
	 <div class="clear"></div>
    </li>
</volist>
</ul>
<a>自定义Widget</a>
<ul id="customWidget" class="connectedSortable">
<volist name="widget_custom" id="custom">
	<li id="offWidget_{$key}" class="ui-state-default2">
	 <div class="widget-title">{$custom.title}=>{$key}</div>
	 <div class="widget-action"><a href="#" class="move">[+]</a></div>
	 <div class="widget-description">{$custom.description}<span class="widget-delete"><a href="__URL__/deleteCustomWidget/id/{$key}">删除</a></span></div>
	 <div class="clear"></div>
    </li>
</volist>
</ul>
</td>
  <td valign="top" align="center">
<ul id="onWidget" class="connectedSortable">
<volist name="widget_on" id="on">
	<li id="offWidget_{$on}" class="ui-state-default">
	 <div class="widget-title">{$on}</div>
	 <div class="clear"></div>
    </li>
</volist>
</ul>
</td>
</tr>
</table>
<table cellpadding="3" cellspacing="1">
<th colspan="2">自定义Widget</th>
<tr>
    <td width="12%" class="label">标题:</td>
        <td width="88%">
          <input type='text' name='custom_widget_title' maxlength="20" size='17' id="title" />
        </td>
      </tr>
	  <tr>
        <td class="label"><a href="javascript:showNotice('customwidgetcontent');" title="{$Think.lang.notic}"><img src="__PUBLIC__/Images/notice.gif" width="16" height="16" border="0"></a> 内容:</td>
        <td>
          <textarea name="custom_widget_content" rows="8" cols="60"></textarea><br />
          <span class="notice-span" style="display:block" id="customwidgetcontent">任意文本或 HTML</span>
		  </td>
      </tr>
	  <tr>
    <td colspan="2" align="center">
      <input type="submit" value=" {$Think.lang.submit} " class="button" />&nbsp;&nbsp;&nbsp;
      <input type="reset" value=" {$Think.lang.reset} " class="button" />
	  <input type="hidden" name="act" value="do" /></td>
  </tr>
</table>
</div>
</form>
<include file="Public:pagefooter"/> 